É possível alternar a visibilidade de um elemento, usando as funções .hide (), .show () ou .toggle ()?
Como você testaria se um elemento está visível ou oculto?
2020-12-07 21:53:46
1
2
Próximo
Como a pergunta se refere a um único elemento, este código pode ser mais adequado:
// Verifica o conteúdo CSS para exibição: [nenhum | bloco], ignora a visibilidade: [verdadeiro | falso]
$ (elemento) .is (": visível");
// O mesmo funciona com ocultos
$ (elemento) .is (": oculto");
É o mesmo que a sugestão de twernt, mas aplicada a um único elemento; e corresponde ao algoritmo recomendado no FAQ do jQuery.
Usamos o is () do jQuery para verificar o elemento selecionado com outro elemento, seletor ou qualquer objeto jQuery. Este método percorre os elementos DOM para encontrar uma correspondência, que satisfaça o parâmetro passado. Ele retornará verdadeiro se houver uma correspondência, caso contrário, retornará falso.
|
Você pode usar o seletor oculto:
// Corresponde a todos os elementos que estão ocultos
$ ('elemento: oculto')
E o seletor visível:
// Corresponde a todos os elementos que são visíveis
$ ('elemento: visível')
|
if ($ (elemento) .css ('display') == 'nenhum' || $ (elemento) .css ("visibilidade") == "oculto") {
// 'elemento' está oculto
}
O método acima não considera a visibilidade do pai. Para considerar o pai também, você deve usar .is (": oculto") ou .is (": visível").
Por exemplo,
Div2
O método acima irá considerar div2 visível enquanto: visível não. Mas o acima exposto pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro divs visível no pai oculto porque em tais condições: visible não funcionará.
|
Nenhuma dessas respostas aborda o que eu entendo ser a pergunta, que é o que eu estava procurando, "Como faço para lidar com itens que têm visibilidade: ocultos?". Nem: visible nem: hidden resolverão isso, já que ambos estão procurando exibição de acordo com a documentação. Até onde pude determinar, não há seletor para lidar com a visibilidade do CSS. Aqui está como resolvi isso (seletores jQuery padrão, pode haver uma sintaxe mais condensada):
$ (". item"). each (function () {
if ($ (this) .css ("visibilidade") == "oculto") {
// lida com o estado não visível
} outro {
// lida com o estado visível
}
});
|
Em Como determino o estado de um elemento alternado?
Você pode determinar se um elemento é recolhido ou não usando os seletores: visible e: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Se você está simplesmente agindo em um elemento com base em sua visibilidade, pode apenas incluir: visible ou: hidden na expressão do seletor. Por exemplo:
$ ('# meuDiv: visível'). animate ({esquerda: '+ = 200px'}, 'lento');
|
Freqüentemente, ao verificar se algo está visível ou não, você irá imediatamente e fará outra coisa com ele. O encadeamento do jQuery torna isso fácil.
Portanto, se você tiver um seletor e quiser realizar alguma ação nele apenas se estiver visível ou oculto, você pode usar o filtro (": visível") ou filtro (": oculto") seguido de encadeamento com a ação que deseja toma.
Então, em vez de uma declaração if, assim:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({largura: "toggle"}); // Ocultar botão
}
Ou mais eficiente, mas ainda mais feio:
botão var = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({largura: "toggle"}); // Ocultar botão
}
Você pode fazer tudo em uma linha:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
O seletor: visible de acordo com a documentação do jQuery:
Eles têm um valor de exibição CSS de nenhum.
Eles são elementos de formulário com type = "hidden".
Sua largura e altura são definidas explicitamente como 0.
Um elemento ancestral está oculto, portanto, o elemento não é mostrado na página.
Elementos com visibilidade: oculto ou opacidade: 0 são considerados visíveis, pois ainda consomem espaço no layout.
Isso é útil em alguns casos e inútil em outros, porque se você quiser verificar se o elemento está visível (display! = None), ignorando a visibilidade dos pais, você descobrirá que fazendo .css ("display") == 'nenhum 'não é apenas mais rápido, mas também retornará a verificação de visibilidade corretamente.
Se você deseja verificar a visibilidade em vez da exibição, você deve usar: .css ("visibilidade") == "oculto".
Também leve em consideração as notas adicionais do jQuery:
Como: visible é uma extensão jQuery e não faz parte da especificação CSS, as consultas usando: visible não podem aproveitar o aumento de desempenho fornecido pelo método nativo DOM querySelectorAll (). Para obter o melhor desempenho ao usar: visible para selecionar os elementos, primeiro selecione os elementos usando um seletor CSS puro e, em seguida, use .filter (": visible").
Além disso, se você estiver preocupado com o desempenho, deve marcar Agora você me vê ... mostrar / ocultar desempenho (04-05-2010). E use outros métodos para mostrar e ocultar elementos.
|
Isso funciona para mim, e estou usando show () e hide () para tornar meu div oculto / visível:
if ($ (this) .css ('display') == 'none') {
/ * seu código vai aqui * /
} outro {
/ * lógica alternativa * /
}
|
Como funciona a visibilidade do elemento e jQuery;
Um elemento pode ser oculto com display: none,visibilidade: oculta ou opacidade: 0. A diferença entre esses métodos:
display: none oculta o elemento e não ocupa nenhum espaço;
visibilidade: oculto oculta o elemento, mas ainda ocupa espaço no layout;
opacity: 0 oculta o elemento como "visibilidade: oculto" e ainda ocupa espaço no layout; a única diferença é que a opacidade permite tornar um elemento parcialmente transparente;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} outro {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} outro {
$ ('. target'). show ();
}
if ($ ('. target-visibility'). css ('visibility') == 'hidden') {
$ ('. target-visibility'). css ({
visibilidade: "visível",
exibição: ""
});
} outro {
$ ('. target-visibility'). css ({
visibilidade: "oculto",
exibição: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
opacidade: "1",
exibição: ""
});
} outro {
$ ('. target-visibility'). css ({
opacidade: "0",
exibição: ""
});
}
Métodos de alternância úteis do jQuery:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Você também pode fazer isso usando JavaScript simples:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
retorna falso;
}
Notas:
Funciona em qualquer lugar
Funciona para elementos aninhados
Funciona para CSS e estilos inline
Não requer estrutura
|
Eu usaria a classe CSS .hide {display: none! Important; }
Para ocultar / mostrar, chamo .addClass ("hide") /. RemoveClass ("hide"). Para verificar a visibilidade, uso .hasClass ("hide").
É uma maneira simples e clara de verificar / ocultar / mostrar elementos, se você não planeja usar os métodos .toggle () ou .animate ().
|
Link de demonstração
$ ('# clickme'). click (function () {
$ ('# livro'). toggle ('lento', função () {
// Animação concluída.
alert ($ ('# book'). is (": visible")); // <--- TRUE se Visível Falso se Oculto
});
});
Clique aqui
Fonte:
Plug n Play do Blogger - ferramentas e widgets jQuery: como ver se o elemento está oculto ou visível usando jQuery
|
Pode-se simplesmente usar o atributo oculto ou visível, como:
$ ('elemento: oculto')
$ ('elemento: visível')
Ou você pode simplificar o mesmo com o seguinte.
$ (elemento) .is (": visível")
|
ebdiv deve ser definido como style = "display: none;". Funciona tanto para mostrar quanto para ocultar:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Outra resposta que você deve levar em consideração é se você está escondendo um elemento, você deve usar jQuery, mas em vez de realmente escondê-lo, você remove o elemento inteiro, mas copia seu conteúdo HTML e a própria tag em uma variável jQuery, e então tudo que você precisa fazer é testar se existe tal tag na tela, usando o normal if (! $ ('# thetagname'). length).
|
Ao testar um elemento contra: seletor oculto em jQuery, deve-se considerar que um elemento posicionado de forma absoluta pode ser reconhecido como oculto, embora seus elementos filhos sejam visíveis.
Isso parece um pouco contra-intuitivo em primeiro lugar - embora dar uma olhada mais de perto na documentação do jQuery forneça as informações relevantes:
Os elementos podem ser considerados ocultos por vários motivos: [...] Sua largura e altura são definidas explicitamente como 0. [...]
Portanto, isso realmente faz sentido em relação ao modelo de caixa e ao estilo calculado para o elemento. Mesmo que a largura e a altura não sejam definidas explicitamente como 0, elas podem ser definidas implicitamente.
Dê uma olhada no seguinte exemplo:
console.log ($ ('. foo'). is (': escondido')); // verdadeiro
console.log ($ ('. bar'). is (': oculto')); // falso
.foo {
posição: absoluta;
esquerda: 10px;
topo: 10px;
plano de fundo: # ff0000;
}
.Barra {
posição: absoluta;
esquerda: 10px;
topo: 10px;
largura: 20px;
altura: 20px;
fundo: # 0000ff;
}
Atualização para jQuery 3.x:
Com o jQuery 3, o comportamento descrito mudará! Os elementos serão considerados visíveis se tiverem quaisquer caixas de layout, incluindo aquelas de largura e / ou altura zero.
JSFiddle com jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
O mesmo código JavaScript terá esta saída:
console.log ($ ('. foo'). is (': oculto')); // falso
console.log ($ ('. bar'). is (': oculto'));// falso
|
Isso pode funcionar:
expect ($ ("# message_div"). css ("display")). toBe ("none");
|
Exemplo:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Oculto');
}
});
|
Para verificar se não está visível eu uso!:
if (! $ ('# book'). is (': visible')) {
alerta ('# livro não está visível')
}
Ou o seguinte também é o mesmo, salvando o seletor jQuery em uma variável para ter melhor desempenho quando você precisar dele várias vezes:
var $ book = $ ('# livro')
if (! $ book.is (': visible')) {
alerta ('# livro não está visível')
}
|
Use alternância de classes, não edição de estilo. . .
Usar classes designadas para "ocultar" elementos é fácil e também um dos métodos mais eficientes. Alternar uma classe 'oculta' com um estilo de exibição 'nenhum' terá um desempenho mais rápido do que editar esse estilo diretamente. Expliquei um pouco disso muito bem na questão Stack Overflow Tornando dois elementos visíveis / ocultos no mesmo div.
Práticas recomendadas e otimização de JavaScript
Aqui está um vídeo verdadeiramente esclarecedor de um Google Tech Talk do engenheiro front-end do Google Nicholas Zakas:
Acelere seu Javascript (YouTube)
|
Exemplo de uso da verificação visível para adblocker ativado:
$ (document) .ready (function () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Desative o adblocker."). show ();
});
"ablockercheck" é um ID que bloqueia o adblocker. Portanto, verificando se está visível, você pode detectar se o adblocker está ativado.
|
Afinal, nenhum dos exemplos me convém, então escrevi o meu próprio.
Testes (sem suporte do filtro do Internet Explorer: alfa):
a) Verifique se o documento não está oculto
b) Verifique se um elemento tem largura / altura / opacidade zero ou exibição: nenhuma / visibilidade: oculto em estilos embutidos
c) Verifique se o centro (também porque é mais rápido do que testar cada pixel / canto) do elemento não está escondido por outro elemento (e todos os ancestrais, exemplo: overflow: hidden / scroll / um elemento sobre o outro) ou bordas da tela
d) Verifique se um elemento tem largura / altura / opacidade zero ou exibição: nenhuma / visibilidade: oculto nos estilos computados (entre todos os ancestrais)
Testado em
Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento do Internet Explorer 5-11 + Internet Explorer 8 em um máquina virtual) e Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativo = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
função dentro (filho, pai) {
enquanto (criança) {
if (filho === pai) retorna verdadeiro;
filho = child.parentNode;
}
retorna falso;
};
função de retorno (elem) {
E se (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'escondido' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) retorna falso;
var rect = elem.getBoundingClientRect ();
if (relativo) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} mais se (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.esquerdo + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) retorna falso;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nulo;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
return true;
}
}) ();
Como usar:
is_visible (elem) // boolean
|
Você precisa verificar ... Exibição e visibilidade:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// O elemento não é visível
} outro {
// O elemento é visível
}
Se verificarmos $ (this) .is (": visible"), o jQuery verifica as duas coisas automaticamente.
|
Talvez você possa fazer algo assim
$ (document) .ready (function () {
var visible =$ ('# tElement'). is (': visible');
if (visível) {
alerta ("visível");
// Código
}
outro
{
alerta ("escondido");
}
});
Nome
|
Basta verificar a visibilidade verificando um valor booleano, como:
if (this.hidden === false) {
// Seu código
}
Usei esse código para cada função. Caso contrário, você pode usar is (': visible') para verificar a visibilidade de um elemento.
|
Porque Elementos com visibilidade: oculto ou opacidade: 0 são considerados visíveis, pois ainda consomem espaço no layout (conforme descrito para jQuery: Seletor visível) - podemos verificar se o elemento é realmente visível desta forma:
function isElementReallyHidden (el) {
return $ (el) .is (": oculto") || $ (el) .css ("visibilidade") == "oculto" || $ (el) .css ('opacidade') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Mas e se o CSS do elemento for como o seguinte?
.elemento{
posição: absoluta; esquerda: -9999;
}
Portanto, esta resposta à pergunta do Stack Overflow, como verificar se um elemento está fora da tela, também deve ser considerada.
|
Uma função pode ser criada para verificar os atributos de visibilidade / exibição, a fim de avaliar se o elemento é mostrado na IU ou não.
function checkUIElementVisible (elemento) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Trabalho violino
|
Além disso, aqui está uma expressão condicional ternária para verificar o estado do elemento e, em seguida, alterná-lo:
% ') .show (' lento ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} outro {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Próximo
Questão altamente ativa. Ganhe 10 reputação para responder a esta pergunta. O requisito de reputação ajuda a proteger essa pergunta contra spam e atividades sem resposta.
Não é a resposta que você está procurando? Navegue por outras questões com a tag visibilidade do javascript jquery dom ou faça sua própria pergunta.
Fonte:
Plug n Play do Blogger - ferramentas e widgets jQuery: como ver se o elemento está oculto ou visível usando jQuery
|
Pode-se simplesmente usar o atributo oculto ou visível, como:
$ ('elemento: oculto')
$ ('elemento: visível')
Ou você pode simplificar o mesmo com o seguinte.
$ (elemento) .is (": visível")
|
ebdiv deve ser definido como style = "display: none;". Funciona tanto para mostrar quanto para ocultar:
$ (document) .ready (function () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Outra resposta que você deve levar em consideração é se você está escondendo um elemento, você deve usar jQuery, mas em vez de realmente escondê-lo, você remove o elemento inteiro, mas copia seu conteúdo HTML e a própria tag em uma variável jQuery, e então tudo que você precisa fazer é testar se existe tal tag na tela, usando o normal if (! $ ('# thetagname'). length).
|
Ao testar um elemento contra: seletor oculto em jQuery, deve-se considerar que um elemento posicionado de forma absoluta pode ser reconhecido como oculto, embora seus elementos filhos sejam visíveis.
Isso parece um pouco contra-intuitivo em primeiro lugar - embora dar uma olhada mais de perto na documentação do jQuery forneça as informações relevantes:
Os elementos podem ser considerados ocultos por vários motivos: [...] Sua largura e altura são definidas explicitamente como 0. [...]
Portanto, isso realmente faz sentido em relação ao modelo de caixa e ao estilo calculado para o elemento. Mesmo que a largura e a altura não sejam definidas explicitamente como 0, elas podem ser definidas implicitamente.
Dê uma olhada no seguinte exemplo:
console.log ($ ('. foo'). is (': escondido')); // verdadeiro
console.log ($ ('. bar'). is (': oculto')); // falso
.foo {
posição: absoluta;
esquerda: 10px;
topo: 10px;
plano de fundo: # ff0000;
}
.Barra {
posição: absoluta;
esquerda: 10px;
topo: 10px;
largura: 20px;
altura: 20px;
fundo: # 0000ff;
}
Atualização para jQuery 3.x:
Com o jQuery 3, o comportamento descrito mudará! Os elementos serão considerados visíveis se tiverem quaisquer caixas de layout, incluindo aquelas de largura e / ou altura zero.
JSFiddle com jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
O mesmo código JavaScript terá esta saída:
console.log ($ ('. foo'). is (': oculto')); // falso
console.log ($ ('. bar'). is (': oculto'));// falso
|
Isso pode funcionar:
expect ($ ("# message_div"). css ("display")). toBe ("none");
|
Exemplo:
$ (document) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Oculto');
}
});
|
Para verificar se não está visível eu uso!:
if (! $ ('# book'). is (': visible')) {
alerta ('# livro não está visível')
}
Ou o seguinte também é o mesmo, salvando o seletor jQuery em uma variável para ter melhor desempenho quando você precisar dele várias vezes:
var $ book = $ ('# livro')
if (! $ book.is (': visible')) {
alerta ('# livro não está visível')
}
|
Use alternância de classes, não edição de estilo. . .
Usar classes designadas para "ocultar" elementos é fácil e também um dos métodos mais eficientes. Alternar uma classe 'oculta' com um estilo de exibição 'nenhum' terá um desempenho mais rápido do que editar esse estilo diretamente. Expliquei um pouco disso muito bem na questão Stack Overflow Tornando dois elementos visíveis / ocultos no mesmo div.
Práticas recomendadas e otimização de JavaScript
Aqui está um vídeo verdadeiramente esclarecedor de um Google Tech Talk do engenheiro front-end do Google Nicholas Zakas:
Acelere seu Javascript (YouTube)
|
Exemplo de uso da verificação visível para adblocker ativado:
$ (document) .ready (function () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Desative o adblocker."). show ();
});
"ablockercheck" é um ID que bloqueia o adblocker. Portanto, verificando se está visível, você pode detectar se o adblocker está ativado.
|
Afinal, nenhum dos exemplos me convém, então escrevi o meu próprio.
Testes (sem suporte do filtro do Internet Explorer: alfa):
a) Verifique se o documento não está oculto
b) Verifique se um elemento tem largura / altura / opacidade zero ou exibição: nenhuma / visibilidade: oculto em estilos embutidos
c) Verifique se o centro (também porque é mais rápido do que testar cada pixel / canto) do elemento não está escondido por outro elemento (e todos os ancestrais, exemplo: overflow: hidden / scroll / um elemento sobre o outro) ou bordas da tela
d) Verifique se um elemento tem largura / altura / opacidade zero ou exibição: nenhuma / visibilidade: oculto nos estilos computados (entre todos os ancestrais)
Testado em
Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento do Internet Explorer 5-11 + Internet Explorer 8 em um máquina virtual) e Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativo = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
função dentro (filho, pai) {
enquanto (criança) {
if (filho === pai) retorna verdadeiro;
filho = child.parentNode;
}
retorna falso;
};
função de retorno (elem) {
E se (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'escondido' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) retorna falso;
var rect = elem.getBoundingClientRect ();
if (relativo) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} mais se (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.esquerdo + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) retorna falso;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nulo;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
return true;
}
}) ();
Como usar:
is_visible (elem) // boolean
|
Você precisa verificar ... Exibição e visibilidade:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// O elemento não é visível
} outro {
// O elemento é visível
}
Se verificarmos $ (this) .is (": visible"), o jQuery verifica as duas coisas automaticamente.
|
Talvez você possa fazer algo assim
$ (document) .ready (function () {
var visible =$ ('# tElement'). is (': visible');
if (visível) {
alerta ("visível");
// Código
}
outro
{
alerta ("escondido");
}
});
Nome
|
Basta verificar a visibilidade verificando um valor booleano, como:
if (this.hidden === false) {
// Seu código
}
Usei esse código para cada função. Caso contrário, você pode usar is (': visible') para verificar a visibilidade de um elemento.
|
Porque Elementos com visibilidade: oculto ou opacidade: 0 são considerados visíveis, pois ainda consomem espaço no layout (conforme descrito para jQuery: Seletor visível) - podemos verificar se o elemento é realmente visível desta forma:
function isElementReallyHidden (el) {
return $ (el) .is (": oculto") || $ (el) .css ("visibilidade") == "oculto" || $ (el) .css ('opacidade') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Mas e se o CSS do elemento for como o seguinte?
.elemento{
posição: absoluta; esquerda: -9999;
}
Portanto, esta resposta à pergunta do Stack Overflow, como verificar se um elemento está fora da tela, também deve ser considerada.
|
Uma função pode ser criada para verificar os atributos de visibilidade / exibição, a fim de avaliar se o elemento é mostrado na IU ou não.
function checkUIElementVisible (elemento) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Trabalho violino
|
Além disso, aqui está uma expressão condicional ternária para verificar o estado do elemento e, em seguida, alterná-lo:
% ') .show (' lento ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} outro {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Próximo
Questão altamente ativa. Ganhe 10 reputação para responder a esta pergunta. O requisito de reputação ajuda a proteger essa pergunta contra spam e atividades sem resposta.
Não é a resposta que você está procurando? Navegue por outras questões com a tag visibilidade do javascript jquery dom ou faça sua própria pergunta.